<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv=X-UA-Compatible content="IE=edge">
		<meta name=viewport content="width=device-width,initial-scale=1">
		
		<title>NAS 音乐工具 - 2025.08.31</title>
		<!-- import CSS -->
		<link rel="stylesheet" href="./style/element-ui@2.15.13.css" />
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" /> -->

		<!-- 引入仿照 Vuetify 制作的 margin padding 类库 -->
		<link rel="stylesheet" href="./style/MarginPadding@0.2.0.css" />
	</head>
	<body>
		<el-container id="app" style="width: 100%; height: 100%;">
			<!-- 为了消除 el-container 的 flex row 的特性, 这里添加一个 div -->
			<div style="width: 100%;">
				<el-tabs v-model="mTabActiveName" type="card">
					<el-tab-pane label="1. 拷贝歌单" name="NasMusicCopy">
						<tab_panel_view_01 />
					</el-tab-pane>
					<el-tab-pane label="2. 导出歌词" name="LyricExport">
						<tab_panel_view_02 />
					</el-tab-pane>
				</el-tabs>
				
				<keep-Alive :include="cpuRouterViewKeepAlive">
					<router-view></router-view>
				</keep-Alive> 				
			</div>
		</el-container>
	</body>
	<!-- import Vue before Element -->
	<script src="./script/vue@2.7.16.js"></script>
	<!-- 开发环境版本 -->
	<!-- <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script> -->
	<!-- 生产环境版本 -->
	<!-- <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script> -->	

	<!-- import Vue Router -->
	<script src="./script/vue-router@3.6.5.js"></script>
	<!-- <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script> -->

	<!-- import JavaScript -->
	<script src="./script/element-ui@2.15.13.js"></script>
	<!-- <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script> -->

	<!-- 解决 chrome 报错 [Violation]Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive -->
	<script src="./script/default-passive-events@2.0.0.js"></script>


	<script src="./script/linq@3.2.0.js"></script>
	<script src="./script/jsmediatags@3.9.7.min.js"></script>
	<script src="./script/jszip@3.10.1.js"></script>


	<!-- import view -->
	<script src="./view/root.js"></script>	
	<script src="./view/view_NasMusicCopy.js"></script>
	<script src="./view/view_LyricExport.js"></script>

	<script>
		// 注册全局组件
		Vue.component('tab_panel_view_01', view_NasMusicCopy);
		Vue.component('tab_panel_view_02', view_LyricExport);
	</script>

	<script>
		//#region 创建路由实例并配置路由规则
		const routerArr = [
			{ path: '/', component: view_Root, IsIgnore: true }, // 根路由
		];

		const router = new VueRouter({ routes: routerArr });
		//#endregion

		var vueApp = new Vue({
			el: "#app",
			router, // 注入路由
			data: function () {
				return {
					mTabActiveName: 'NasMusicCopy',
				};
			},
			computed: {
				cpuRouterViewKeepAlive() {
					// !!!遇到的坑!!! <keep-alive> 只对有 name 的组件生效，匿名组件（没有 name）不会被缓存。
					// 根据 routerArr 的数据, 组合 keep-alive include 所需要的集合
					const r = routerArr.filter(i => i.meta?.keepAlive).map(i => 
					{
						// 从 path 截取出 view 的控件名称
						let index = i.path.lastIndexOf('/');
						if(index < 0) 
							index = 0;
						else
							index = index + 1; // 去掉开始的斜杠						
						return i.path.substring(index);
					});
					return r;
				},
			},
		});
	</script>
	<style>		
	</style>
</html>
